<template>
  <div>
    <div class="modal-content">
      <button type="button" class="close-modal" data-dismiss="modal" aria-label="Close"><span
        aria-hidden="true">&times;</span></button>
      <div class="modal-body">
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active">
            <a href="#signin-form" aria-controls="signin-form" role="tab" data-toggle="tab">登录</a>
          </li>
          <li role="presentation">
            <a href="#signup-form" aria-controls="signup-form" role="tab" data-toggle="tab">注册</a>
          </li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="signin-form">
            <form>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon">
                    <i class="fa fa-envelope" style="margin:0;"></i>
                  </div>
                  <input type="email" v-model="login_email" class="form-control" placeholder="请输入邮箱">
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon">
                    <i class="fa fa-lock" style="margin:0;"></i>
                  </div>
                  <input type="password" v-model="login_passwd" class="form-control" placeholder="请输入密码">
                </div>
              </div>
              <div class="form-inline verify-code-item" style="display:none;">
                <div class="form-group">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="请输入验证码">
                  </div>
                </div>
                <!-- <img class="verify-code" src="" source="https://www.shiyanlou.com/captcha.gif"> -->

              </div>

              <div class="help-block text-left">{{login_message}}</div>

              <div class="form-group remember-login">
                <input name="remember" type="checkbox" value="y"> 下次自动登录
                <a class="pull-right" href="/zhaomima">忘记密码？</a>
              </div>
              <div class="form-group">
                <input class="btn btn-primary" @click="login" type="button" value="进入实验楼">
              </div>
              <div class="form-group widget-signin">
                <span>快速登录</span>
                <a href="/auth/qq?next="><i class="fa fa-qq"></i></a>
                <a
                  href="https://api.weibo.com/oauth2/authorize?client_id=99261385&redirect_uri=http://127.0.0.1:8080/weibo_callback"><i
                  class="fa fa-weibo"></i></a>
                <a href="/auth/weixin?next="><i class="fa fa-weixin"></i></a>
                <a href="/auth/github?next="><i class="fa fa-github"></i></a>
                <a href="/auth/renren?next="><i class="fa fa-renren"></i></a>
              </div>
              <div class="form-group error-msg">
                <div class="alert alert-danger" role="alert"></div>
              </div>
            </form>
          </div>


          <div role="tabpanel" class="tab-pane" id="signup-form">
            <form>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon">
                    <i class="fa fa-envelope" style="margin:0;"></i>
                  </div>
                  <input type="email" v-model="register_email" class="form-control" placeholder="请输入邮箱">
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon">
                    <i class="fa fa-lock" style="margin:0;"></i>
                  </div>
                  <input type="password" v-model="register_passwd" class="form-control" placeholder="请输入密码">
                </div>
              </div>
              <div class="form-inline">
                <div class="form-group">
                  <div class="input-group">
                    <input type="text" v-model='register_verify' class="form-control"
                           placeholder="请输入验证码">
                  </div>
                </div>
                <input class="btn verify-code" type="button" @click="send_verify_email" :value="mes">
                <!-- 提示 -->
                <div class="help-block text-left">{{message}}</div>
              </div>
              <div class="form-group">
                <input class="btn btn-primary" @click="register" type="button" value="注册">
              </div>
              <div class="form-group agree-privacy">
                注册表示您已经同意我们的<a href="privacy/index.html" target="_blank">隐私条款</a>
              </div>
              <div class="form-group widget-signup">
                <span>快速注册</span>
                <a href="/auth/qq?next="><i class="fa fa-qq"></i></a>
                <a
                  href="https://api.weibo.com/oauth2/authorize?client_id=99261385&redirect_uri=http://127.0.0.1:8080/weibo_callback"><i
                  class="fa fa-weibo"></i></a>
                <a href="/auth/weixin?next="><i class="fa fa-weixin"></i></a>
                <a href="/auth/github?next="><i class="fa fa-github"></i></a>
                <a href="/auth/renren?next="><i class="fa fa-renren"></i></a>
              </div>
              <!-- <div class="form-group error-msg">
                  <div class="alert alert-danger" role="alert"></div>
              </div> -->
            </form>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'LoginReg', data() {
      return {
        register_email: '', //注册时的 邮箱
        register_passwd: '', //注册时的 密码
        register_verify: '',  //注册时的 验证码
        login_email: '',
        login_passwd: '',
        is_register: false, //判断是否能够注册，只有验证码输入正确时才可以注册
        is_unregister: true, //校验失败为true，成功为false
        message: '', //操作错误时 表单的提示信息,
        login_message: '',
        mes: '发送验证码',
      }
    },
    methods: {
      // ***点击注册时调用的函数
      register() {
        // 判断是否都输入内容
        if (!this.register_email || !this.register_passwd) {
          this.message = "请输入信息"
          return;
        }
        // 如果验证码没通过时返回

        // let定义一个变量 new新建一个FormData对象实例化给form_data变量
        let form_data = new FormData()
        // 向实例化的form_data添加数据  FormData是表单型
        form_data.append('register_email', this.register_email)
        form_data.append('register_passwd', this.register_passwd)
        form_data.append('register_verify', this.register_verify)
        // 发送axios请求服务器
        axios({
          url: '/Registerview/',
          method: 'post',
          data: form_data,
        }).then(res => {
          console.log(res.data)
          if (res.data.code === 200) {
            // 注册成功
            alert('注册成功,请登录')
          } else {
            this.message = res.data.msg
          }
        })
      },
      //*** 发送邮箱（验证码）调用的函数
      send_verify_email() {
        // 叹号取反，判断如果用户没有输入邮箱，直接返回 ，什么都不干
        if (!this.register_email) {
          this.message = '请输入邮箱后发送验证码'
          return;
        }
        let re_email = this.register_email.match('[a-zA-Z0-9.-]+[@][a-zA-Z0-9]+([.][a-zA-Z]){1,2}')
        if (!re_email) {
          this.message = '邮箱格式不正确'
          return;
        }
        // 输入了邮箱的话，获取邮箱，发送axios请求给对应接口
        let form_data = new FormData();
        form_data.append('register_email', this.register_email);
        var data = {'email': this.register_email};
        this.axios.post('/verifyemail/', data).then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            this.message = res.data.msg;
            alert(res.data.msg)
          } else {
            this.message = res.data.msg;
            alert(res.data.msg)
          }
        })
      },
      //*** 校验表单框中的验证码输入是否正确
      // verify_email_token() {
      //   let form_data = new FormData();
      //   form_data.append('register_verify', this.register_verify);
      //   form_data.append('register_email', this.register_email);
      //   axios({
      //     url: 'http://127.0.0.1:8000/api/user/verify_token/',
      //     method: 'post',
      //     data: form_data,
      //   }).then(res => {
      //     if (res.data.code == 200) {
      //       // 如果校验成功，改为true代表可以进行注册
      //       this.is_register = true;
      //       this.is_unregister = false;
      //       this.message = res.data.message
      //     } else {
      //       this.is_register = false;
      //       this.is_unregister = true;
      //       this.message = res.data.message
      //     }
      //   }).catch(res => {
      //     alert(res);
      //   })
      // },
      //*** 登录
      login() {
        // 判断是否都输入
        if (!this.login_email || !this.login_passwd) {
          this.login_message = '请输入信息'
          return;
        }
        // 正则匹配邮箱判断格式是否正确
        let re_email = this.login_email.match('[a-zA-Z0-9.-]+[@][a-zA-Z0-9]+([.][a-zA-Z]){1,2}')
        if (!re_email) {
          this.login_message = '邮箱格式不正确'
          return;
        }
        // 封装表单数据
        let form_data = new FormData()
        form_data.append('login_email', this.login_email)
        form_data.append('login_passwd', this.login_passwd)
        // 发起axios请求
        axios({
          url: '/loginview/',
          method: 'post',
          data: form_data
        }).then(res => {
          // 登录成功
          if (res.data.code === 200) {
            // 取出token
            console.log(res.data)
            alert(res.data.msg)
            // this.$router.go(0)
            let token = res.data.token
            // 存入session
            sessionStorage.setItem('token', token);
            sessionStorage.setItem('email', res.data.email);
            sessionStorage.setItem('uid', res.data.uid);
            sessionStorage.setItem('username', res.data.username);
            // 跳转到全部课程
            this.$router.push({
              path: '/course',
            })
            //
          } else {
            this.login_message = res.data.msg
          }
        }).catch(res => {
          console.log(res.data)
        })

      }
    },
  }
</script>

<style>

</style>
